<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ text.name }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form :form="form">
					<a-form-item label="奖项类型">
						<a-select v-decorator="['Type', { rules: [{ required: true, message: '请选择奖项类型' }] }]" style="width:100%" @change="ActivityTypePrizeTypeFun">
							<a-select-option v-for="(item, index) in ActivityTypePrizeTypeList" :key="item.Key" :value="item.Key">{{ item.Value }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="奖项">
						<a-select v-decorator="['ActivityTypePrizeID', { rules: [{ required: true, message: '请选择奖项' }] }]" showSearch optionFilterProp="children" style="width:100%" >
							<a-select-option v-for="(item, index) in ActivityTypePrizeList" :key="index" :value="item.ID">{{ item.Title }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="奖项名称" v-show="form.getFieldValue('Type')==2"><a-input v-decorator="['PrizeTitle', { rules: [{ required: form.getFieldValue('Type')==2?true:false, message: '请输入奖项名称' }] }]" /></a-form-item>
					<a-form-item label="学号">
						<a-textarea
							placeholder="请输入学号，多个学号之间请换行"
							:autosize="{ minRows: 10, maxRows: 20 }"
							v-decorator="['userNo', { rules: [{ required: true, message: '请输入学号' }] }]"
						/>
						当前正在录入第{{ form.getFieldValue('userNo') ? form.getFieldValue('userNo').split('\n').length : 0 }}条数据
					</a-form-item>
					<a-form-item label="导入结果" v-if="importIf">
						<div class="flex">
							<a-col :span="12" style="margin-right:5px;">
								成功列表，共{{ importData.filter(m => m.IsSuccess).length }}条
								<div style="height:170px;overflow:hidden scroll;">
									<a-list class="followListArea" size="small" bordered :data-source="importData.filter(m => m.IsSuccess)">
										<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
											<div style="width: 100px">{{ item.UserNo }} :</div>
											<div style="flex: 1;text-align: left;">{{ item.Msg }}</div>
										</a-list-item>
									</a-list>
								</div>
							</a-col>
							<a-col :span="12">
								失败列表，共{{ importData.filter(m => !m.IsSuccess).length }}条
								<div style="height:170px;overflow:hidden scroll;">
									<a-list class="followListArea" size="small" bordered :data-source="importData.filter(m => !m.IsSuccess)">
										<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
											<div style="width: 100px">{{ item.UserNo }} :</div>
											<div style="flex: 1;text-align: left;">{{ item.Msg }}</div>
										</a-list-item>
									</a-list>
								</div>
							</a-col>
						</div>
					</a-form-item>
					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit" :loading="loading">{{ !currentID ? '确认添加' : '确认修改' }}</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
import { ManageActivityMemberPrizeDoImport,UserActivityMemberPrizeDoImport,GetActivityTypePrizeListCommon } from '@/api/follow';
export default {
	props: {
		text: Object,
		ActivityTypePrizeTypeList:Array,
	},
	watch: {
		text: function(text) {
			this.currentID = text.ID
			if (!this.currentID) {
			} else {
				this.currentID = text.ID;
				setTimeout(()=>{
					this.form.setFieldsValue({
						UserNo: text.UserNo,
						Type: text.Type,
						ActivityTypePrizeID: text.ActivityTypePrizeID,
						PrizeTitle: text.PrizeTitle,
					});
				},100)
					
			}
		}
	},
	data() {
		return {
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			currentID:'',
			DepartmenDropdowntList: [],
			ActivityTypePrizeList:[],
			importIf:false,
			loading:false
		};
	},
	methods: {
		async ActivityTypePrizeTypeFun(e){
			this.form.setFieldsValue({ ActivityTypePrizeID: '' });
			let res = await GetActivityTypePrizeListCommon({type:e,activityTypeID:this.$route.query.TypeID,levelID:this.$route.query.levelID})
			this.ActivityTypePrizeList = res.data.data
		},
		closeFunction(data) {
			this.importIf = false;
			this.form.resetFields();
			this.$emit('closeFun', 1);
		},
		handleSubmit(e) {
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data = values;
					data.ActivityID = this.$route.query.activityID
					data.content = values.userNo.trim();
					if(!data.content){
						this.$message.error('学号不能为空！')
						return false
					}
					this.loading = true
					data.splitChar = '\n';
					let res = {}
					res = this.text.myType=='user'?await UserActivityMemberPrizeDoImport(data):await ManageActivityMemberPrizeDoImport(data);
					this.importData = res.data.data;
					this.form.resetFields();
					this.$message[res.data.code == 0 ? 'success' : 'error'](res.data.msg);
					this.importIf = true;
					this.loading = false
				}
			})
		}
	}
};
</script>

<style lang="less" scoped>
	.aid .base{
		width:1000px;
		margin-left:-500px;
	}
	/deep/.ant-form-item {
		margin: 20px 50px;
		display: flex;
	}
	/deep/.ant-form-item-label {
		width: 100px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}
	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

.ant-form-item {
	margin-bottom: 10px;
}

/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
</style>
